import React, { useState } from "react";
import { Service_Tab, Service_Item } from "./style.js";
import {ComponentTitle} from '../../../assets/global-style'

const Service = (props) => {
  const { service } = props;
  return (
    <Service_Tab>
     <ComponentTitle>我的服务</ComponentTitle>
      <Service_Item>
        {service.map((item, index) => {
          return (
            <li className="service_item" key={index}>
              <div className="service_icon">
                <svg className="icon" aria-hidden="true">
                  <use xlinkHref={item.icon_name}></use>
                </svg>
              </div>
              <div className="service_text">{item.title}</div>
            </li>
          );
        })}
      </Service_Item>
    </Service_Tab>
  );
};

export default Service;
